# Markdown Snippets [Including other Markdown files in Markdown]

You can include other Markdown files in a Markdown file by making use of the `import{:ts}` statement & MDX.

:::warning
This only works with MDX (`.mdx`) files. If you want to take advantage of this feature and you are using a `.md` file, rename the file extension to `.mdx`.
:::

## Quick Start

::::steps

### Create a snippet

First, we will create a snippet called `snippet.mdx` that we will import into another Markdown file.

```mdx [snippet.mdx]
### Hello world

This is my snippet.
```

### Import the snippet

Next, we will import the snippet into our MDX file using an `import{:ts}` statement. It compiles to a React component, so we can render it with `<Snippet />{:tsx}`.

```mdx [example.mdx]
import Snippet from './snippet.mdx'

# Example

This is an example of including a snippet in a Markdown file.

<Snippet />
```

### Output

The resulting output will look like this:

<div className="vocs_Content" style={{ background: 'var(--vocs-color_background2)', borderRadius: '4px' }}>
# Example

This is an example of including a snippet in a Markdown file.

## Hello world

This is my snippet.
</div>

::::

## Tip: Passing Props

As we are just rendering a React component, we can also pass props to `<Snippet />{:tsx}`. We can access those props in the MDX file with the `props` global variable.

:::code-group
```mdx [example.mdx]
import Snippet from './snippet.mdx'

# Example

This is an example of including a snippet in a Markdown file.

<Snippet title="Hello world" content="This is my snippet." />
```

```mdx [snippet.mdx]
## {props.title}

{props.content}
``` 
:::